<template>
   <van-checkbox
  v-model="isCheckAll"
  :indeterminate="isIndeterminate"
  @change="checkAllChange"
>
  全选
</van-checkbox>

<van-checkbox-group v-model="checkedResult" @change="checkedResultChange">
  <van-checkbox v-for="item in list" :key="item" :name="item">
    复选框 {{ item }}
  </van-checkbox>
</van-checkbox-group>
</template>
 
<script lang="ts" setup>
import { ref, } from 'vue';
const list = ['a', 'b', 'c', 'd']

// 是否全选
const isCheckAll = ref(false);
// 单选选中数据
const checkedResult = ref();
// 半选按钮
const isIndeterminate = ref(false);

const checkAllChange = (val: boolean) => {
    // console.log(val);
    console.log(checkedResult.value);
    
    // 全选 则选中所有。否则为空[]    
  checkedResult.value = val ? list : []
  // 半选按钮不显示
  isIndeterminate.value = false
 }

const checkedResultChange = (value: string[]) => {
  
    // value 选中数据加入数组中
  const checkedCount = value.length
    // 全选按钮状态 取决数组长度
  isCheckAll.value = checkedCount === list.length
    // 半选
  isIndeterminate.value = checkedCount > 0 && checkedCount < list.length
}
</script>